<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Console Tricks!</title>
</head>

<body>

  <p onClick="makeGreen()">×BREAK×DOWN×</p>

  <script>
    const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

    function makeGreen() {
      const p = document.querySelector('p');
      p.style.color = '#BADA55';
      p.style.fontSize = '50px';
    }

    // Regular
    console.log("console, regular");

    // Interpolated
    console.log("console, you are %s", "😜😜");

    // Styled

    console.log("%c this is a styled console", "font-size:24px");

    // warning!

    console.warn("console.warn");

    // Error :|
    console.error("console.error");

    // Info

    console.info("console.info");

    // Testing
    console.assert(typeof dogs !== "object", "dogs is not Object");

    // clearing

    console.clear();

    let p = document.querySelector("p");
    // Viewing DOM Elements
    console.dir(p);
    // Grouping together

    dogs.forEach((dog) => {
      console.group(`${dog.name}`);
      console.log(`its name is ${dog.name}`);
      console.log(`${dog.name} is ${dog.age} years old`)
      console.groupEnd()
    })

    // counting

    console.count("uuq")
    console.count("uuq")
    console.count("uuq")
    console.count("uuq")

    // timing
    console.time("fectching data");
    fetch("https://api.github.com/users/wesbos")
      .then(data => data.json())
      .then(data => {
        console.timeEnd("fectching data");
      });
    // table
    console.table(dogs);

  </script>
</body>

</html>